<template>
  <el-form 
    class="form"
    size="mini"
    ref="form"
    :model="form"
    label-width="42px"
    label-position="left">
    <!-- 模版属性 -->
    <template v-if="form.areaId === ''">
      <el-form-item :label="$t('名称')">
        <el-input disabled class="input-width" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item :label="$t('类型')">
        <el-select disabled class="input-width" v-model="form.type"></el-select>
      </el-form-item>
      <el-form-item :label="$t('宽')">
        <el-input disabled class="input-width" v-model="form.width"></el-input>
      </el-form-item>
      <el-form-item :label="$t('高')">
        <el-input disabled class="input-width" v-model="form.height"></el-input>
      </el-form-item>
      <el-form-item :label="$t('标签')">
        <!-- <el-select-tree
          :multiple="true"
          v-model="form.tagList"
          :data="tagTree"
          :default-expand-all="defaultExpandAll"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children'
          }"
          @change="tagChange"
          ></el-select-tree> -->
        <tag-setting-input
          :clearable="true"
          :disable-inner-tags="true"
          :tag-id="form.tagList"
          class-name="input-width"
          @update:tagId="tagChange"></tag-setting-input>
      </el-form-item>
    </template>
    <!-- 其他元素属性 -->
    <template v-else>
      <el-form-item :label="$t('名称')">
        <el-input disabled class="input-width" v-model="form.name"></el-input>
      </el-form-item>
      <div class="flex">
        <el-form-item class="mr-16" label="X">
          <el-input disabled class="half-input" v-model="form.x"></el-input>
        </el-form-item>
        <el-form-item label="Y" label-width="24px">
          <el-input disabled class="half-input" v-model="form.y"></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item class="mr-16" label="W">
          <el-input disabled class="half-input" v-model="form.width"></el-input>
        </el-form-item>
        <el-form-item label="H" label-width="24px">
          <el-input disabled class="half-input" v-model="form.height"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="Z">
        <el-input disabled class="input-width" v-model="form.z"></el-input>
      </el-form-item>
      <el-form-item :label="$t('标签')">
        <!-- <el-select-tree
          :multiple="true"
          v-model="form.tagList"
          :data="tagTree"
          :default-expand-all="defaultExpandAll"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children'
          }"
          @change="tagChange"
          ></el-select-tree> -->
        <tag-setting-input
          :clearable="true"
          :disable-inner-tags="true"
          :tag-id="form.tagList"
          class-name="input-width"
          @update:tagId="tagChange"></tag-setting-input>
      </el-form-item>
      <el-form-item
        v-if="isVolType"
        label="音频输出优先级"
        label-width="108px">
        <el-select v-model="form.avl" placeholder="请选择优先级" disabled>
          <el-option v-for="(item) in avls" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

    </template>
     
    <slot></slot>
  </el-form>
</template>

<script>
import TagSettingInput from '../../../media-center/components/TagSettingInput'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters} = createNamespacedHelpers('media')

import { avlArray } from "@/const/index"

export default {
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  inject: ['dialogId'],
  data() {
    return {
      defaultExpandAll: true,
      avls: avlArray
    }
  },
  components:{
    TagSettingInput
  },
  computed: {
    ...mapGetters(['tagTree']),
    isVolType() {
      const volTypes = ['Main', 'Audio', 'Mixed']
      return volTypes.indexOf(this.form.areaId.split('-')[0]) > -1
    }
  },
  methods: {
    tagChange(v) {
      console.log(v)
      this.$eventBus.$emit(this.dialogId ? `tagChange-${this.dialogId}` : 'tagChange', v)
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width:auto;
  margin: 15px 15px 0 20px;


  .mr-16 {
    margin-right: 16px;
  }

  .input-width {
    width: 200px;
  }
  .half-input {
    width: 80px;
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
</style>